<template>
  <ConfigProvider :locale="locale">
    <RouterView v-slot="{ Component, route }">
      <!-- 当顶层路由（布局）变化时强制重建，避免相同组件被复用导致子路由不渲染 -->
      <component :is="Component" :key="route.matched?.[0]?.path || route.fullPath" />
    </RouterView>
  </ConfigProvider>
</template>

<script setup>
import { watch, onMounted } from 'vue'
import { ConfigProvider } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import { useAppStore } from '@/store'

const locale = zhCN
const appStore = useAppStore()

// 应用主题
const applyTheme = (theme) => {
  document.documentElement.setAttribute('data-theme', theme)
}

// 监听主题变化
watch(() => appStore.theme, (newTheme) => {
  applyTheme(newTheme)
}, { immediate: true })

// 初始化时应用主题
onMounted(() => {
  applyTheme(appStore.theme)
})
</script>

<style>
#app {
  width: 100%;
  height: 100vh;
}
</style>
